<template>
  <div class="supplier-PO-wrapper page-wrapper">
    <Menu mode="horizontal" theme="light" :active-name="cueMenuProps.activeName" @on-select="goToPath">
      <MenuItem name="3-1" class="bold">
        <Icon type="md-time" />
        Wait to confirm
      </MenuItem>
      <MenuItem name="3-2" class="bold">
        <Icon type="md-checkmark-circle-outline" />
        Confirmed
      </MenuItem>
      <MenuItem name="3-3" class="bold">
        <Icon type="md-time" />
        Wait to ship(WH)
      </MenuItem>
      <MenuItem name="3-4" class="bold">
        <Icon type="ios-plane" />
        Shipped
      </MenuItem>
    </Menu>
    <transition name="router-slid" mode="out-in">
      <div>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </transition>
  </div>
</template>

<script>
  import {mapState, mapMutations} from 'vuex';
  import { siderMenu } from '@/components/mixin';
  export default {
  	name: 'SupplierPO',
    mixins: [ siderMenu ],
    data () {
  		return {}
    },
    computed: {
      ...mapState([ 'cueMenuProps'])
    },
    created() {
    },
    methods: {
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../../assets/sass/mixin';
  .supplier-PO-wrapper .ivu-icon {
    font-size: 17px;
  }
  .bold {
    font-weight: bold;
  }
</style>
